<template>
  <el-table :data="persons" style="width: 100%">
    <el-table-column prop="pid" label="监督员编号" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="tel" label="电话" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="tel" label="电话" />
    <el-table-column prop="role.rname" label="角色" />

    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> Edit </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="js" setup>
import { usePersonStore } from '@/stores/person'
import { storeToRefs } from 'pinia'

const personStore = usePersonStore()
const { persons } = storeToRefs(personStore)
const handleEdit = (index, row) => {
  console.log(index, row)
  personStore.show4Mod(index)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

personStore.findall()
</script>
